

<template>
  <div ref="container" class="container"></div>
</template>
<script setup lang="ts">
import LogicFlow from '@logicflow/core';
import "@logicflow/core/dist/style/index.css"
import { DndPanel } from '@logicflow/extension';
import "@logicflow/extension/lib/style/index.css"
import { LiteFlow, parse as parseLFToEl } from 'logicflow-liteflow';
import { onMounted, ref } from 'vue';

// 声明容器的对应ref对象和LF对象
const container = ref();
onMounted(() => {
  const lf = new LogicFlow({
    container: container.value,
    grid: true,
    plugins: [DndPanel, LiteFlow]
  })

  lf.extension.dndPanel.setPatternItems([
    {
      type: "COMMON",
      text: '',
      label: "common",
      icon: '',
    }
  ])

  lf.render("")

})

</script>
<style scoped>
.container {
  width: 100%;
  height: 100%;
}
</style>
